<!-- 快捷评语 -->
<template>
	<view>
		<!-- 短语列表 -->
		<u-popup :show="show" :round="8">
			<view class="quick-modal">
				<view class="quick-modal-title">
					<view class="modal-title">快捷评语</view>
					<view class="modal-cancel" @click="cancel">取消
					</view>
				</view>
				<view class="modal-content">
					<view class="add-quick" @click="addQuick">
						<u-icon name="plus" :bold="true" color="#4174FD"
							size="18">
						</u-icon>
						<text style="margin-left: 10rpx;">添加快捷用语</text>
					</view>
					<view class="add-form" v-if="addItem">
						<view
							style="width: 80%;border: 1rpx solid #e5e5e5;border-radius: 8rpx;">

							<input placeholder="请输入快捷短语" border="surround"
								clearable v-model="newItem"></input>
						</view>
						<view
							style="width: 20%;display: flex;justify-content: space-around;">
							<u-icon name="close" :bold="true" color="#4174FD"
								@click="addCancel" size="18">
							</u-icon>
							<u-icon name="checkmark" :bold="true"
								@click="addSave" color="#4174FD" size="18">
							</u-icon>
						</view>
					</view>
					<u-toast ref="uToast"></u-toast>

					<view class="quick-list">
						<view class="quick-item" v-for="(item, index) in list"
							:key="item.id">
							<view @click="checkItem(item.msg)">
								{{item.msg}}
							</view>
							<view class="delete-icon"
								@click="deleteItem(item.id)">
								<u-icon name="close" :bold="true"
									color="#4174FD" size="18">
								</u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		quickSave,
		quickGet,
		quickDel,
	} from "@/pages/achievement/api/teacher.js";

	export default {

		props: {
			visible: {
				type: Boolean,
				default: false
			},
			jobId: {
				type: Number
			}
		},
		watch: {
			visible(newVal) {
				if (newVal) {
					this.getList()
				}
				this.show = newVal
			}
		},
		data() {
			return {
				show: false,
				addItem: false,
				newItem: '',
				list: []
			}
		},
		methods: {
			checkItem(msg) {
				this.$emit('change', { msg, hide: false })
			},
			cancel() {
				this.$emit('change', { msg: '', hide: false })
			},
			addQuick() {
				this.addItem = true
			},

			async getList() {
				const data = await quickGet()
				this.list = data?.data?.list
			},
			addCancel() {
				this.addItem = false
				this.newItem = ''
			},
			async addSave() {
				if (!this.newItem) {
					return this.$refs.uToast.show({
						message: '请输入快捷短语'
					})
				}
				const params = { msg: this.newItem }
				await quickSave(params)
				this.addCancel()
				this.getList()
			},
			async deleteItem(id) {
				await quickDel(id)
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.quick-modal {
		.quick-modal-title {
			position: relative;
			// width: 100%;
			height: 108rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 30rpx;
			font-size: 30rpx;
			color: #333;
			margin-bottom: 24rpx;

			.modal-title {
				font-size: 34rpx;
				font-weight: 500;
			}

			.modal-cancel {
				position: absolute;
				right: 30rpx;
			}
		}

		.modal-content {
			padding: 0 30rpx;

			.add-quick {
				height: 108rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #4174FD;
			}

			.quick-list {
				height: 540rpx;
				overflow-y: scroll;

				.quick-item {
					position: relative;
					height: 108rpx;
					text-align: center;
					line-height: 108rpx;

					.delete-icon {
						position: absolute;
						right: 30rpx;
						top: 38rpx;
					}
				}

			}

			.add-form {
				height: 108rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

			}
		}
	}
</style>
